<script setup>
import { onMounted, ref } from 'vue'
const length = ref(4)
const code = ref([])

const createCode = () => {
  let len = length.value,
    codeList = [],
    chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',
    charsLen = chars.length

  for (let i = 0; i < len; i++) {
    let rgb = [
      Math.round(Math.random() * 220),
      Math.round(Math.random() * 240),
      Math.round(Math.random() * 200)
    ]
    codeList.push({
      code: chars.charAt(Math.floor(Math.random() * charsLen)),
      color: `rgb(${rgb})`,
      padding: `${[Math.floor(Math.random() * 10)]}px`,
      transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
    })
  }
  code.value = codeList
  console.log(codeList)
}

const getStyle = (data) =>
  `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`

const refreshCode = () => {
  createCode()
}
onMounted(() => {
  createCode()
})
</script>
<template>
  <div class="main" @click="refreshCode">
    <span class="code"
          v-for="(item,index) in code"
          :key="index"
          :style="getStyle(item)">{{ item.code }}</span>
  </div>
</template>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.code {
  display: inline-block;
  font-style: 18px;
}
</style>